<!-- login -->
<template>
  <div>
    <div v-if="isMobile" class="mobile">
      <img class="bk" src="@a/img/login/bk6.jpg">
      <div class="content">
        <span class="title">开启你的心选之旅</span>
        <transition name="fade">
          <div v-show="isLogin">
            <input placeholder="账号" v-model="data.user">
            <input placeholder="密码" type="password" v-model="data.psw">
            <button class="login" @click="login">登录</button>
            <button class="register" @click="toRegister">注册</button>
          </div>
        </transition>
        <transition name="fade">
          <div v-show="!isLogin">
            <input placeholder="账号" v-model="registerData.user">
            <input placeholder="密码" type="password" v-model="registerData.psw">
            <input placeholder="确认密码" type="password" v-model="registerData.confirm">
            <input placeholder="邮箱" type="email" v-model="registerData.email">
            <button class="login" @click="register">注册</button>
            <button class="register" @click="toLogin">返回</button>
          </div>
        </transition>
      </div>
    </div>
    <div v-else class="pc">
      <img class="bk select-none" src="@a/img/login/bk7.jpg">
        <div class="right">
          <div class="titleBox select-none">
          <p class="logo">CHOICE</p>
          <span class="title">开启你的心选之旅</span>
          <!-- <p class="slogan">选你所爱</p> -->
        </div>
        <transition name="fade">
          <div class="inputBox" v-show="isLogin">
            <el-input v-model="data.user" class="input" placeholder="账号"></el-input>
            <el-input v-model="data.psw" class="input" type="password" placeholder="密码"></el-input>
            <el-button class="input" type="primary" @click="login" :loading="loading">登录</el-button>
            <el-button class="input" @click="toRegister">注册</el-button>
            <el-button type="text" class="toHome" @click="toHome">随便逛逛 >></el-button>
          </div>
        </transition>
        <transition name="fade">
          <div class="inputBox" v-show="!isLogin">
            <el-input class="input" v-model="registerData.user" placeholder="账号"></el-input>
            <el-input class="input" type="password" v-model="registerData.psw" placeholder="密码"></el-input>
            <el-input class="input" type="password" v-model="registerData.confirm" placeholder="确认密码"></el-input>
            <el-input class="input" v-model="registerData.email" placeholder="email"></el-input>
            <el-button class="input" type="primary" @click="register" :loading="loading">注册</el-button>
            <el-button class="input" @click="toLogin">返回</el-button>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      isLogin: true,
      img: require('@a/img/login/bk6.jpg'),
      isMobile: true,
      data: {
        user: '',
        psw: ''
      },
      registerData: {
        user: '',
        psw: '',
        confirm: '',
        email: ''
      }
    }
  },
  methods: {
    toRegister() {
      this.isLogin = false
    },
    toLogin() {
      this.isLogin = true
    },
    toHome() {
      window.location.href = 'pc.html'
    },
    login() {
      console.log('login')
      if (!this.data.user || !this.data.psw) {
        this.$message({
          message: '请输入账号密码',
          type: 'error'
        })
        return
      }
      this.loading = true
      this.$get('/auth/login', {
        name: this.data.user,
        password: this.data.psw
      }).then(
        res => {
          if (res.code === 200) {
            localStorage.setItem('token', res.body.token)
            this.$get('/auth/verify').then(
              res => {
                if (res.code === 200) {
                  sessionStorage.setItem('tokenInfo', JSON.stringify(res.data))
                } else {
                  console.log('token认证失败')
                }
              }
            )
            setTimeout(() => {
              window.location.href = 'pc.html'
            }, 1000)
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'error'
            })
          }
        }
      ).catch(
        err => {
          console.log(err)
          this.$message({
            showClose: true,
            message: err,
            type: 'error'
          })
        }
      ).finally(
        () => {
          this.loading = false
        }
      )
    },
    register() {
      if (!this.registerData.user) {
        this.$message({
          showClose: true,
          message: '请输入账号',
          type: 'error'
        })
        return
      }
      if (!this.registerData.psw) {
        this.$message({
          showClose: true,
          message: '请确认密码',
          type: 'error'
        })
        return
      }
      if (!this.registerData.confirm) {
        this.$message({
          showClose: true,
          message: '请再次确认密码',
          type: 'error'
        })
        return
      }
      if (this.registerData.psw !== this.registerData.confirm) {
        this.$message({
          showClose: true,
          message: '两次输入密码不一致',
          type: 'error'
        })
        this.registerData.psw = ''
        this.registerData.confirm = ''
        return
      }
      if (!this.registerData.email) {
        this.$message({
          showClose: true,
          message: '请输入邮箱',
          type: 'error'
        })
        return
      }
      if (!this.$u.isEmail(this.registerData.email)) {
        this.$message({
          message: '请输入正确的邮箱',
          type: 'error'
        })
        return
      }
      this.loading = true
      this.$post('/auth/register', {
        name: this.registerData.user,
        password: this.registerData.psw,
        email: this.registerData.email
      }).then(
        res => {
          if (res.code === 200) {
            this.$message({
              message: '注册成功，正在跳转到主页...',
              type: 'success'
            })
            // this.$get('/auth/verify').then(res => {
            //   if (res.code === 200) {
            //     sessionStorage.setItem('tokenInfo', JSON.stringify(res.data))
            //   } else {
            //     console.log('token认证失败')
            //   }
            // })
            this.data.user = res.body.name
            this.data.psw = res.body.password
            setTimeout(() => {
              this.login()
            }, 2000)
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        }
      ).catch(
        err => {
          this.$message({
            showClose: true,
            message: err,
            type: 'error'
          })
        }
      ).finally(
        () => {
          this.loading = false
        }
      )
    }
  },
  created() {
  },
  mounted() {
    this.isMobile = this.$u.isMobile()
  }
}
</script>
<style lang='scss' scoped>
.pc {
  position: relative;
  min-width: 1300px;
  height: 100vh;
  overflow: hidden;
  .bk {
    position: absolute;
    right: 40%;
    height: 100%;
  }

  .right {
    position: absolute;
    left: 56%;
    top: 8%;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    // justify-items: right;

    .titleBox {
      // position: absolute;
      // left: 56%;
      // top: 8%;
      // transform: translateY(-50%);

      text-align: right;

      z-index: 20;

      .logo {
        line-height: 20px;
        font-size: 50px;
        font-weight: 700;
        letter-spacing: 3px;
      }

      .title {
        line-height: 20px;
        color: #000;
        // text-shadow: 1px 1px 5px #999;
        font-size: 55px;
        font-weight: 700;
        letter-spacing: 2px;
        z-index: 10;
      }
    }

    .inputBox {
      width: 300px;
      position: absolute;
      top: 130%;
      right: 10px;

      z-index: 21;

      .input {
        width: 300px;
        margin: 5px 0px;
      }

      .toHome {
        float: right;
      }
    }
  }
}

.mobile {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;

  &::after {
    content: "";
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    right: 0;
    background-color: rgba(141, 141, 141, 0.219);
    z-index: -9;
  }
  .bk {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 900px;
      opacity: 0.8;
      overflow: hidden;
      z-index: -10;
      background-size: cover;
    }
  .content {
    width: 80vw;
    margin: 5rem auto 0;

    .title {
      margin: 2rem 0;
      display: block;
      color: #000;

      font-size: 2rem;
      font-weight: 700;
    }

    input {
      width: 70vw;
      position: relative;
      margin: 0.5rem 0;
      padding: 0 5vw;
      height: 60px;
      background: #0000001e;

      border: none;
      border-radius: 30px;

      font-size: 20px;
      font-weight: 700;

      transition: 0.5s;
      &::placeholder {
        position: absolute;
        color: rgba(0, 0, 0, 0.699);
      }

      &:focus {
        &::placeholder {
          content: "";
          color: #00000000;
        }

        background-color: #ee3f4e30;
      }
    }
    button {
      width: 100%;
      position: relative;
      margin: 0.5rem 0;
      padding: 0 20px;
      height: 60px;

      border: none;
      border-radius: 30px;

      font-size: 20px;

      transition: 0.5s;
    }
    .login {
      background: $primary;
      color: #fff;
    }
    .register {
      background: #fff;
      color: #000;
    }
  }
}

.fade-enter-active {
  transition: opacity .8s;
}
.fade-enter /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0.2;
}
</style>
